<template>
  <div>
    欢迎{{this.$store.getters.getUser.userNickname}}登录
    <el-row :gutter="20">
      <el-col :span="16">
        <div>
          <img src="../assets/1.jpg"  width="200" style="border-radius: 100% 100% 100% 100% / 30% 30% 30% 30%">
        </div>
      </el-col>
      <el-col :span="8">
        <div >
          欢迎{{this.$store.getters.getUser.userNickname}}登录
          <a href="/orders" @click.prevent="gtOrderList" style="text-decoration:none">我的订单</a>
          <a href="/login" @click.prevent="logout" style="text-decoration:none">注销</a>
          <a href="">我的订单</a>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="24">
        <div >
          <template>
            <el-carousel :interval="4000" type="card" height="250px">
              <el-carousel-item  v-for="(img,index) in imgList" :key="index">
                <img v-bind:src="img.url">
              </el-carousel-item>
            </el-carousel>
          </template>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="24" >

      <el-col :span="24"><div class="productInfo" v-for="product in productList" >
        <img :src="product.pimg" width="200px"/><br/>
        <center><font color="blue"><b>{{product.pname}}</b></font></center><br/>
        <center><font color="blue"><b>￥{{product.price}}</b></font></center><br/>
        <center> <el-button type="primary"   @click="goShopping(product)">立即下单</el-button></center>
      </div></el-col>

    </el-row>


  </div>
</template>

<script>
    export default {
        name: "Home" ,
        data(){
            return{
                imgList: [

                    {url: require('../assets/1.jpg')},
                    {url: require('../assets/2.jpg')},
                    {url: require('../assets/3.jpg')},
                    {url: require('../assets/4.jpg')},
                    {url: require('../assets/5.jpg')},
                    {url: require('../assets/tig - 副本.jpg')},
                ],
                productList:[]

            }
        },
         created(){
            this.queryProduct();
        },

        methods:{

            logout() {
                this.$confirm('确定要退出登录吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$message({
                        type: 'success',
                        message: '退出成功!'
                    });
                    //确认退出，清除sessionStorage
                    sessionStorage.clear();

                    //跳转登录页面(编程式导航)
                    this.$router.push('/')

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消退出'
                    });
                });
            },
            // 进入商品详情页
            goShopping(product){
                if(this.$store.getters.getUser.userId==null){
                    this.$router.push("login")
                }
                // 往SesionStroage中放Product信息
                // JSON.stringify 将对象转换成json字符串
                sessionStorage.setItem("product",JSON.stringify(product));
                this.$router.push("productInfo")
            },
            queryProduct(){
                var _this = this;
                this.axios({method:'get',
                    url:'http://localhost:8086/queryProduct'
                }).then(function (result) {
                    _this.productList = result.data.data;

                })
            },
            gtOrderList(){
                this.$router.push("order")
            }
        }

    }
</script>

<style scoped>
  .el-row {
    margin-bottom: 20px;
  &:last-child {
     margin-bottom: 0;
   }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }


  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
  .productInfo{
    display: inline-block;
    margin: 110px 110px 110px 110px;
  }
  .el-row {
    margin-bottom: 20px;
  &:last-child {
     margin-bottom: 0;
   }
  }
</style>
